<template>
  <li
      @mouseenter="num = id"
      @mouseleave="num = 1"
      :style="{background: num === id ? '#ccc':''}"
  >
    <label>
      <input type="checkbox" @change="changeDoneId(id)" :checked="done"/>
      <span>{{content}}</span>
    </label>
    <button class="btn btn-danger" @click="deleteId(id)" :style="{display: num === id ? 'block':'none'}">删除</button>
  </li>
</template>


<script>
export default {
  name:"Item",
  props:["id","content","done","deleteId","changeDoneId"],
  data(){
    return{
      num:1,
    }
  }
}
</script>


<style>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>